<template>
  <div>
      <Row>
        <Col span="2" >
            <Tree :data="Treedata" @on-select-change='onselectchange'></Tree>
        </Col> 
        <Col span="20" offset="2" >
            <Row style="margin-bottom:10px">
                <Col span="8">
                    <ButtonGroup >      
                        <Button type="primary"  @click="modal = true">添加</Button>
                        <Button type="error" @click="removes">删除多个</Button>
                    </ButtonGroup>
                    </Col>
                    <Col span="8" offset="6">
                        <Input v-model="data.title" >      
                            <Button slot="append" icon="ios-search" @click="search"></Button>
                        </Input>
                </Col>
             </Row>
             <Row>
        
             <Col span="22">
                <Modal
            
        v-model="modal"
        title="数据信息"
        @on-ok="ok"
        @on-cancel="cancel">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        
        <FormItem label="Title" prop="title">
            <Input v-model="formValidate.title" placeholder="Enter the title"></Input>
        </FormItem>
        <FormItem label="Author" prop="author">
            <Input v-model="formValidate.author" placeholder="Enter the author"></Input>
        </FormItem>
        <FormItem label="Content" prop="content">
            <!-- <Input v-model="formValidate.content" placeholder="Enter the content"></Input> -->
             <quill-editor :content="formValidate.content"
             @change="onEditorChange($event)"
             >
                <!-- @change="onEditorChange($event)"  -->
            </quill-editor>
        </FormItem>
        
        <FormItem label="分类id" prop="cateId">
            <Input v-model="formValidate.cateId" @blur="checkid" placeholder="Enter the type"></Input>
        </FormItem>    
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
       
    </Form>
        
    </Modal>
     
      <Table @on-selection-change="onselectionchange" border :columns="columns" :data="list" style="margin-bottom:10px"></Table>
     <Page :total="data.total" @on-change='onChangePage' 
    
     @on-page-size-change="onpagesizechange"
     size="small" show-elevator show-sizer></Page>
        </Col>
    </Row>
        
        </Col>  
    </Row>  

  </div>
</template>

<script>
import Base from '../../common/Base'
  export default {
      mixins:[Base],
     data(){
        return {
            ids:[],
        module:'news',
          Treedata:[
              { expand: true,}
          ],
          formValidate: {
                    title:'',
                    author:'',
                    content:'',
                    cateId:'',
                    id:''
                },
            ruleValidate: {
                title: [
                    { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                ],
                author: [
                    { required: true, message: 'Author cannot be empty', trigger: 'blur' },
                ],
                content: [
                    { required: true, message: 'Content cannot be empty', trigger: 'blur' },
                ],
                cateId: [
                    { required: true, message: 'Content cannot be empty', trigger: 'blur' },
                ]    
            }, 
                columns: [
                    
                     {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'Title',
                        key: 'title',
                        ellipsis:true,
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'bookmark',
                                        color:'red'
                                    }
                                }),
                                h('strong', params.row.title)
                            ]);
                        }
                    },
                    {
                        title: 'Author',
                        key: 'author',
                        width:100+'px',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person',
                                       
                                        color:'green'
                                    }
                                }),
                                h('strong', params.row.author)
                            ]);
                        }
                    },
                    {
                        title: 'Content',
                        key: 'content',
                        type:'html',
                        ellipsis:true,
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'document-text'
                                    }
                                }),
                                h('strong', params.row.content)
                            ]);
                        }
                    },
                    
                    
                    {
                        title: 'Time',
                        key: 'time',
                         width:100+'px',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'clock',
                                        color:'blue',
                                    }
                                }),
                                h('strong', params.row.date)
                            ]);
                        }
                    },
                     
                   
                    {
                        title: 'Action',
                        key: 'action',
                        width: 130,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.modal=true;
                                            this.show(params)
                                        }
                                    }
                                }, 'Edit'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params)
                                        }
                                    }
                                }, 'delete')
                            ]);
                        }
                    },
                    {
                        title: 'Comment',
                        key: 'comment',
                        width: 130,
                        align: 'center',
                         render: (h, params) => {
                             console.log(params)
                            return h('div', [
                                 h('Icon', {
                                    props: {
                                        type: 'stats-bars',
                                        color:'blue',
                                    }
                                }),
                                
                                h('strong', "数量"+params.row.commentCount),
                                
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            
                                            this.$router.push({path:`/comment/${params.row._id}`});
                                        }
                                    }
                                }, '评论'),
                               

                            ])
                        }
                    },
                ],
                
        }
      },
      created() {
    this.getTree();
  },
    
      methods:{
          checkid(){
            //   if(this.formValidate.cateId){

            //   }
          },
          removes(){
              this.$Modal.confirm({
                title: 'Title',
                content: '<p>确认删除？</p>',
                onOk: () => {
                this.$http({
                  method:'post',
                  url:'http://10.31.153.35:3000/news/data/removes',
                  data:{
                      ids:this.ids
                  }
              }).then(res=>{
                //   this.data.cateId=null;
                  this.getData();
              })
               },
                onCancel: () => {
                    this.$Message.info('Clicked cancel');
                }
            });
          },
          onselectionchange(selection){
              if(selection&&selection.length>0){
                  var ids=[];
                  for(let i in selection){
                      ids.push(selection[i]._id)
                  }
              }
              this.ids=ids; 
          },
        
         onEditorChange({ quill, html, text }) {
 
            this.formValidate.content = html;
            // console.log('editor change!',  html)
        },
        onselectchange(node){
          console.log(node[0])
          if(!node[0].parentId){
             
              this.data.cateId=null;
              this.getData();
          }else{
           
            this.data.cateId=node[0]._id
            this.formValidate.cateId=node[0]._id 
            this.getData();
          }
        },

    getTree() {
      //ajax请求后端，更新数据
      this.$http.post(`http://10.31.153.35:3000/cate/list/0`).then(response => {
        this.Treedata = response.data; //树状结构模块获取data即时更新
        this.Treedata[0].expand = true;
      });
    }
  }
};
</script>
